<template>
    <div class="safeExposure">
        <div class="header">
            <div :class='["itemlist", navIndex==1?"active":""]'
                 @click="navIndex = 1">红榜</div>
            <div :class='["itemlist", navIndex==2?"active":""]'
                 @click="navIndex = 2">黑榜</div>
        </div>
        <div class="content"
             v-if="navIndex == 1">
            <div class="form-section">
                <div class="form-item  form-item-style1">
                    <div class="label-title">
                        <label>开始时间</label>
                    </div>
                    <group>
                        <datetime v-model="startDate1"
                                  @on-change="onPullingDown"></datetime>
                    </group>
                </div>
                <div class="form-item  form-item-style1">
                    <div class="label-title">
                        <label>结束时间</label>
                    </div>
                    <group>
                        <datetime v-model="endDate1"
                                  @on-change="onPullingDown"></datetime>
                    </group>
                </div>
            </div>
            <div class="cut-off-rule"></div>
            <div class="sort">
                <span @click="changeSortType(1)"
                      :class="{'active':sortType == 1}">时间排序</span>
                <span @click="changeSortType(2)"
                      :class="{'active':sortType == 2}">点赞排序</span>
            </div>
            <noData v-if="listAllCount1 == 0"></noData>
            <div class="bscroll bscroll1"
                 v-show="listAllCount1 !=0">
                <vue-better-scroll class="wrapper"
                                   ref="scroll1"
                                   :scrollbar="scrollbarObj"
                                   :pullDownRefresh="pullDownRefreshObj"
                                   :pullUpLoad="pullUpLoadObj"
                                   :startY="parseInt(startY)"
                                   @pullingDown="onPullingDown"
                                   @pullingUp="onPullingUp">
                    <div class="bscroll-container">
                        <ul ref="list"
                            class="list-content">
                            <li v-for="(item,index) in list1"
                                :key="index">
                                <router-link :to="{path:'hongBangDetail',query:{
                                    id:item.ID
                                }}">
                                    <listItem :itemObject="item"></listItem>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </vue-better-scroll>
            </div>
        </div>
        <div class="content"
             v-else>
            <div class="form-section">
                <div class="form-item  form-item-style1">
                    <div class="label-title">
                        <label>开始时间</label>
                    </div>
                    <group>
                        <datetime v-model="startDate2"
                                  @on-change="onPullingDown"></datetime>
                    </group>
                </div>
                <div class="form-item  form-item-style1">
                    <div class="label-title">
                        <label>结束时间</label>
                    </div>
                    <group>
                        <datetime v-model="endDate2"
                                  @on-change="onPullingDown"></datetime>
                    </group>
                </div>
            </div>
            <div class="cut-off-rule"></div>
            <noData v-if="listAllCount2 == 0"></noData>
            <div class="bscroll bscroll2"
                 v-show="listAllCount2 !=0">
                <vue-better-scroll class="wrapper"
                                   ref="scroll2"
                                   :scrollbar="scrollbarObj"
                                   :pullDownRefresh="pullDownRefreshObj"
                                   :pullUpLoad="pullUpLoadObj"
                                   :startY="parseInt(startY)"
                                   @pullingDown="onPullingDown"
                                   @pullingUp="onPullingUp">
                    <div class="bscroll-container">
                        <ul ref="list"
                            class="list-content">
                            <li v-for="(item,index) in list2"
                                :key="index">
                                <router-link :to="{path:'heiBangDetail',query:{
                                    id:item.ID
                                }}">
                                    <listItem :itemObject="item"></listItem>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </vue-better-scroll>
            </div>
        </div>
        <myMenu :addPath="addPath"
                ref="myMenu"></myMenu>
    </div>
</template>
<script>
import formatDate from '@/utils/formatDate'
import myMenu from '@/commonComponents/menu'
import listItem from './childComponent/listItem'
import VueBetterScroll from 'vue2-better-scroll'
export default {
    name: 'safeExposure',
    components: {
        myMenu,
        listItem,
        VueBetterScroll
    },
    data () {
        return {
            userInfo: {},
            // dropDown: false
            // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: {
                threshold: 90,
                stop: 40
            },
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
            scrollToX: 0,
            scrollToY: 0,
            scrollToTime: 700,
            listAllCount1: 0,
            listAllCount2: 0,
            navIndex: 1,
            pageIndex0: 0,
            pageIndex1: 0,
            addPath: '',
            startDate1: `${formatDate().split('-')[0]}-${formatDate().split('-')[1]}-01`,
            endDate1: formatDate(),
            startDate2: `${formatDate().split('-')[0]}-${formatDate().split('-')[1]}-01`,
            endDate2: formatDate(),
            sortType: 1, // 表示时间排序，2表示点赞排序
            list1: [],
            list2: []
        }
    },
    created () {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.addPath = `/addSafeExposure?type=${this.navIndex}`
    },
    mounted () {
        this.onPullingDown()
    },
    activated () {
        this.$refs.myMenu.flag = false
        this.onPullingDown()
    },
    watch: {
        navIndex (newVal) {
            if (this[`list${newVal}`].length === 0) {
                this.$nextTick(() => {
                    this.onPullingDown()
                })
            }
            this.addPath = `/addSafeExposure?type=${newVal}`
        }
    },
    methods: {
        changeSortType (sortType) {
            this.sortType = sortType
            this.onPullingDown()
        },
        onPullingDown () {
            this[`pageIndex${this.navIndex}`] = 0
            this[`list${this.navIndex}`] = []
            this.$refs[`scroll${this.navIndex}`].scrollTo(0, 0, 0)
            this.getData()
        },
        onPullingUp () {
            this[`pageIndex${this.navIndex}`]++
            this.getData()
        },
        getData () {
            let params = {
                'business': 'GetExposals',
                'data': {
                    sortType: this.navIndex === 1 ? this.sortType : '',
                    startDate: this[`startDate${this.navIndex}`],
                    EndDate: this[`endDate${this.navIndex}`],
                    Type: this.navIndex
                },
                'pageIndex': this[`pageIndex${this.navIndex}`],
                'pageSize': 10,
                'userId': this.userInfo.userid
            }

            this.$axiosAjax.getConfigJson(params)
                .then((res) => {
                    if (res.data.code === 0) {
                        this[`list${this.navIndex}`] = this[`list${this.navIndex}`].concat(res.data.data)
                        this[`listAllCount${this.navIndex}`] = res.data.count
                        this[`listCount${this.navIndex}`] = this[`list${this.navIndex}`].length
                    }
                    if (this[`listCount${this.navIndex}`] < this[`listAllCount${this.navIndex}`]) {
                        this.$refs[`scroll${this.navIndex}`].forceUpdate(true)
                    } else {
                        this.$refs[`scroll${this.navIndex}`].forceUpdate(false)
                    }
                }).catch((response) => {
                })
        }
    }
}
</script>
<style scoped>
.header {
    height: 62px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding-top: 5px;
    background-color: #fff;
    border-bottom: 1px solid #f4f4f4;
}
.itemlist {
    width: 60px;
    height: 100%;
    line-height: 62px;
    text-align: center;
    position: relative;
}
.itemlist.active {
    color: #2269ff;
}
.itemlist.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2269ff;
    height: 5px;
}
.division-line {
    height: 4px;
    background: #ebeef2;
}
.sort {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 40px;
    border-bottom: 1px solid #f4f4f4;
}
.sort span {
    font-size: 14px;
    color: #999;
}
.sort span.active {
    color: #2467f6;
}
.bscroll1 {
    position: absolute;
    top: 232px;
    bottom: 0;
    left: 20px;
    right: 0;
    overflow: hidden;
}
.bscroll2 {
    position: absolute;
    top: 192px;
    bottom: 0;
    left: 20px;
    right: 0;
    overflow: hidden;
}
.bscroll-container li {
    border-bottom: 1px solid #efeff4;
    padding: 18px 20px 12px 0;
}
.bscroll-container li > a {
    display: block;
}
</style>
